<template>
  <div class="wrap">
    <div class="essential-box">
      <div class="essential-box">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="grid-content">
              <div class="key">代理商：</div>
              <div class="val">
                <el-select
                  v-model="user_info.agent_id"
                  :disabled="signDisabled"
                >
                  <el-option
                    v-for="item in agentList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="grid-content pl_20">
              <el-link
                class="editor"
                type="primary"
                @click="signEdit"
                v-if="signSaveShow==1"
                >编辑</el-link
              >
            </div>
          </el-col>
          <el-col :span="24" class="mb_70">
            <div class="grid-content">
              <div class="key">手写签名：</div>
              <div class="val">
                <img
                  :src="user_info.sign_pic"
                  class="avatar r-90"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div class="key">人才类型：</div>
              <div class="val">
                <el-input
                  v-model="user_info.work_type_desc"
                  :disabled="signInDisabled"
                ></el-input>
              </div>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="grid-content">
              <div class="key">结算周期：</div>
              <div class="val">
                <el-radio-group
                  v-model="user_info.bill_period"
                  size="small"
                  :disabled="signDisabled"
                >
                  <el-radio label="day">日</el-radio>
                  <el-radio label="week">周</el-radio>
                  <el-radio label="month">月</el-radio>
                </el-radio-group>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div class="key">招聘方式：</div>
              <div class="val">
                <el-input
                  v-model="user_info.recruitment_desc"
                  :disabled="signInDisabled"
                ></el-input>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div class="key">招聘渠道：</div>
              <div class="val">
                <el-input
                  v-model="user_info.belong_desc"
                  :disabled="signInDisabled"
                ></el-input>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content">
              <div class="key">招聘人：</div>
              <div class="val">
                <el-input
                  v-model="user_info.supplier_name"
                  :disabled="signInDisabled"
                ></el-input>
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="grid-content">
              <div class="key">邀请人：</div>
              <div class="val">
                <el-input
                  v-model="user_info.recommender_name"
                  :disabled="signInDisabled"
                ></el-input>
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="grid-content">
              <div class="key">邮箱：</div>
              <div class="val">
                <el-input
                  v-model="user_info.email"
                  :disabled="signInDisabled"
                ></el-input>
              </div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="grid-content">
              <div class="key">备注：</div>
              <div class="val">
                <el-input v-model="user_info.remark" type="textarea"></el-input>
              </div>
            </div>
          </el-col>
          <el-col :span="24" v-if="!signDisabled">
            <div class="edit-btn">
              <el-button round @click="signEditBack()">返回</el-button>
              <el-button round type="primary" @click="signSave()">保存</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { searchAgentList } from "@/api/agent.js";
import { editUser,checkUserAuthList } from "@/api/user.js";
const common = require("../../../../static/tool.js");
export default {
  name: "BasicInformation",
  props: {
    userInfo: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      user_info: {}, //用户信息
      head_url: common.head_url,
      srcMaxList: [], //照片放大
      agentList: [], //代理商
      signInDisabled: true, //不可编辑
      signSaveShow: 2, //是否显示编辑按钮
      signDisabled: true, //点编辑可编辑
      editUser: ''
    };
  },
  async mounted() {
    this.setValue()
    await this.getAgentList() //获取代理商
    await this.checkUserAuthList() //获取是否有编辑权限
  },
  watch: {
    userInfo() {
    	this.setValue()
    }
  },
  methods: {
    //传参
    setValue() {
		  this.user_info = this.userInfo
      if(this.userInfo.sign_info.sign_pic){
        this.user_info.sign_pic = this.head_url + this.userInfo.sign_info.sign_pic
      }else{
        this.user_info.sign_pic = ''
      }
    },
    //获取编辑按钮的权限
    async checkUserAuthList(){
      try {
        let res = await checkUserAuthList({ 
          model: 'user/editUser'
        })
        for (let key in res) {
          if (key == 'user/editUser') this.signSaveShow = res[key]
        }
      } catch (err) {
        console.log(err)
      }
    },
    //获取代理商
    async getAgentList() {
      try {
        let res = await searchAgentList({ status: 1 })
        this.agentList = res.list.map((it) => {
          return {
            id: +it.id,
            name: it.name,
          };
        });
      } catch (err) {
        console.log(err);
      }
    },

    // 编辑
    signEdit() {
      this.signDisabled = false
      this.signSaveShow = 2
    },

    // 基本信息保存
    async signSave() {
      if (!this.user_info.agent_id) return this.$message.error('请选择代理商')
      try {
        await editUser({
          id: this.user_info.id,
          agent_id: this.user_info.agent_id,
          bill_period: this.user_info.bill_period,
          remark: this.user_info.remark
        })
        this.signDisabled = true
        this.signSaveShow = 1
        this.$message.success('操作成功')
      } catch (err) {
        console.log("基本信息保存："+err);
      }
    },

    // 返回
    signEditBack() {
      this.$emit("refresh-info")
      this.signDisabled = true
      this.signSaveShow = 1
      this.$forceUpdate();
    },
  },
};
</script>

<style scoped lang="scss">
.essential-box {
  margin-bottom: 30px;
}
.essential-box .grid-content {
  display: flex;
  height: auto;
  padding: 10px 0;
  height: 30px;
  line-height: 30px;
}
.essential-box .grid-content .key {
  width: 110px;
  font-size: 13px;
  color: #999999;
  text-align: right;
}
.essential-box .grid-content .val {
  font-size: 14px;
  padding-left: 20px;
  color: #222222;
}
.sign-audit-btn {
  margin-left: 20px;
  font-size: 12px;
  padding: 3px 10px;
}
.audit-dialog {
  display: flex;
  padding-bottom: 20px;
}
.audit-dialog .key {
  width: 100px;
  color: #999999;
}
.pl_20 {
  padding-left: 10px;
}
.shop-footer {
  margin-top: 20px;
  padding-top: 20px;
}
.height-auto {
  height: auto !important;
}
.height-auto .val {
  display: flex;
}
.edit-btn {
  text-align: center;
  margin-top: 20px;
}
.ml_20 {
  margin-left: 20px;
}

.r-90 {
  transform: rotate(-90deg);
}
.avatar {
  position: relative;
  top: -75px;
  left: 80px;
  width: 100px !important;
}
.editor {
  width: 100%;
  text-align: right;
}
</style>



// WEBPACK FOOTER //
// src/components/staff/components/BasicInformation.vue